<template>
  <BottomDrawer
    :visible="addVisible"
    :title="'语音录入'"
    :width="400"
    @close="onClose"
  >
    <div class="voice-content">
      <VoiceRecorder
        ref="voiceRecorderRef"
        language="zh-CN"
        :continuous="true"
        :interim-results="true"
        @result="handleVoiceResult"
        @interim-result="handleInterimResult"
        @recording-start="handleRecordingStart"
        @recording-stop="handleRecordingStop"
        @error="handleVoiceError"
      />
    </div>
  </BottomDrawer>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { ElMessage } from 'element-plus';
import VoiceRecorder from '@/components/VoiceRecorder/index.vue';

// 引用
const voiceRecorderRef = ref();

// 状态
const addVisible = ref(false);
const voiceText = ref('');
const interimText = ref('');

// Emits
const emits = defineEmits<{
  'submit': [text: string];
  'refresh': [];
  'recordingStop': [text: string];
}>();

// 语音识别事件处理
const handleVoiceResult = (text: string) => {
  voiceText.value = text;
  //console.log('语音识别结果:', text);
};
const onClose = () => {
  voiceText.value = '';
  interimText.value = '';
  addVisible.value = false;
  voiceRecorderRef.value.onClose();
};
const handleInterimResult = (text: string) => {
  interimText.value = text;
  //console.log('临时识别结果:', text);
};

const handleRecordingStart = () => {
  //console.log('开始录音');
  // ElMessage.success('开始语音录入');
};

const handleRecordingStop = (value:string) => {
  //console.log('停止录音', value);
  addVisible.value = false;
  //console.log(voiceText.value);
  
  emits('recordingStop', voiceText.value);
  // ElMessage.info('语音录入已停止');
};

const handleVoiceError = (error: string) => {
  //console.error('语音识别错误:', error);
  //ElMessage.error(error);
};

// 复制到剪贴板
const copyToClipboard = async () => {
  try {
    await navigator.clipboard.writeText(voiceText.value);
    ElMessage.success('已复制到剪贴板');
  } catch (error) {
    //console.error('复制失败:', error);
    //ElMessage.error('复制失败');
  }
};

// 提交处理
const handleSubmit = () => {
  if (!voiceText.value.trim()) {
    ElMessage.warning('请先录入语音内容');
    return;
  }
  
  emits('submit', voiceText.value);
  addVisible.value = false;
  ElMessage.success('语音内容已提交');
};

// 暴露的方法
defineExpose<{
  open1: (data?: any) => void;
}>({
  open1: (data?: any) => {
    addVisible.value = true;
    voiceText.value = '';
    interimText.value = '';
    voiceRecorderRef.value.clearTranscript();
  },
});
</script>

<style lang="scss" scoped>
::v-deep(.modal-footer) {
  border: none !important;
}
.voice-content {
  padding: 20px 0;
}

.result-preview {
  margin-top: 24px;
  
  .preview-label {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
    
    span {
      font-size: 14px;
      font-weight: 500;
      color: #374151;
    }
  }
  
  .result-textarea {
    .el-textarea__inner {
      border-radius: 8px;
      font-size: 14px;
      line-height: 1.6;
    }
  }
}
</style>
